<template>
  <div class="page-body">
    <div class="body-head">
      <div @click="utils.toBack()" class="to-back">
        <text class="iconfont icon-fanhuijiantou m-r-4 font-weight-700"></text>
        <text>返回</text>
      </div>
      <div @click="submit" class="submit-bt">保存设置</div>
    </div>
    <div class="body-content">
      <div class="content-left">
        <image
          class="m-t-48"
          :src="logoColImg"
          mode="widthFix"
          style="width: 140rpx"
        />
        
        <div class="v-box">
          <text>当前版本号</text>
          <text>V{{useCommonStore().appVersion}}</text>
        </div>
      </div>
      <div class="content-right">
        <div class="form-row">
          <div class="row-label">副屏设置</div>
          <div class="row-content">
            <up-radio-group v-model="formData.radio">
              <up-radio labelSize="16rpx" label="启用" :name="1"> </up-radio>
              <up-radio labelSize="16rpx" label="不启用" :name="0"> </up-radio>
            </up-radio-group>
          </div>
        </div>
        <div class="form-row">
          <div class="row-label">打印设置</div>
          <div class="row-content">
            <up-checkbox-group v-model="formData.printType" placement="row">
              <up-checkbox labelSize="16rpx" :name="1" label="销售完成自动打印"></up-checkbox>
              <up-checkbox labelSize="16rpx" :name="2" label="退货完成自动打印"></up-checkbox>
              <up-checkbox labelSize="16rpx" :name="3" label="冲账完成自动打印"></up-checkbox>
            </up-checkbox-group>
          </div>
        </div>
        <div class="form-row">
          <div class="row-label">打印纸宽度</div>
          <div class="row-content">
            <up-radio-group v-model="formData.printWidth">
              <up-radio labelSize="16rpx" label="58mm" :name="58"> </up-radio>
              <up-radio labelSize="16rpx" label="80mm" :name="80"> </up-radio>
            </up-radio-group>
          </div>
        </div>
        <div class="form-row">
          <div class="row-label">销售面板图片</div>
          <div class="row-content">
            <up-radio-group v-model="formData.saleShowImgs">
              <up-radio labelSize="16rpx" label="显示" :name="1"> </up-radio>
              <up-radio labelSize="16rpx" label="隐藏" :name="0"> </up-radio>
            </up-radio-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref,computed } from "vue";
import logoColImg from "../static/logo-col.png";
import utils from "../utils";
import { useCommonStore } from "../store/common";

const fData = ref({
  radio: 1,
  printType: [1,2,3],
  printWidth: 58,
  saleShowImgs: 1
});
const formData = computed({
  get: () => {
    return fData.value
  },
  set: e => {
    fData.value = e
  }
})

function submit () {
  console.log('submit')
  uni.$u.toast('保存成功')
}

</script>
<style lang="scss" scoped>
.page-body {
  background: $uni-bg-color-1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  touch-action: none; /* 防止滑动或双指缩放 */

  .body-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
    .to-back,
    .submit-bt {
      background: $uni-color-primary;
      color: $uni-text-color-inverse;
      border-radius: 8rpx;
      padding: 8rpx 18rpx;
    }
  }

  .body-content {
    flex: 1;
    height: 0;
    display: flex;
    padding: 0 10rpx 10rpx;
    .content-left {
      display: flex;
      flex-direction: column;
      align-items: center;

      width: 400rpx;
      background: $uni-text-color-inverse;
      border-radius: 14rpx;

      .v-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        border-top: 1rpx solid $uni-border-color-1;
        border-bottom: 1rpx solid $uni-border-color-1;
        padding: 10rpx 30rpx;
        margin-top: 30rpx;
        font-size: 18rpx;
      }
    }
    .content-right {
      margin-left: 20rpx;
      padding: 20rpx;
      flex: 1;
      width: 0;
      background: $uni-text-color-inverse;
      border-radius: 14rpx;

      .form-row {
        display: flex;

        padding: 20rpx 0;
        border-bottom: 1rpx solid $uni-border-color-1;

        .row-label {
          text-align: right;
          margin-right: 30rpx;
          width: 120rpx;
        }
        .row-content {
          flex: 1;
          width: 0;

          ::v-deep .u-radio-group {
            gap: 60rpx !important;
            .u-radio__label-wrap {
              min-width: 60rpx;
            }
            .u-radio {
              margin-bottom: 0 !important;
              margin-top: 0 !important;
            }
          }

          ::v-deep .u-checkbox-group {
            gap: 60rpx;
            .u-checkbox {
              margin: 0!important;
              font-size: 16rpx;
            }
          }
        }
      }
    }
  }
}
</style>
